<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import epInfoFilled from "@iconify-icons/ep/info-filled";
import {
  GuaProperty,
  findGuaProperties,
  updateGuaProperty
} from "@/api/vap/setting";

const oldGuaProperty = new Map<String, GuaProperty>();

const form = ref({
  domain: "",
  security: "",
  ignoreCert: "",
  resizeMethod: "",
  forceLossless: "",
  disableAudio: "",
  enableAudioInput: "",
  recordingPath: "",
  createRecordingPath: "",
  enableTouch: ""
});

const clickUpdataBtn = async () => {
  oldGuaProperty.forEach((v, k) => {
    switch (k) {
      case "domain":
        if (v.value != form.value.domain) {
          v.value = form.value.domain;
          updateGuaProperty(v);
        }
        break;
      case "security":
        if (v.value != form.value.security) {
          v.value = form.value.security;
          updateGuaProperty(v);
        }
        break;
      case "ignore-cert":
        if (v.value != form.value.ignoreCert) {
          v.value = form.value.ignoreCert;
          updateGuaProperty(v);
        }
        break;
      case "resize-method":
        if (v.value != form.value.resizeMethod) {
          v.value = form.value.resizeMethod;
          updateGuaProperty(v);
        }
        break;
      case "force-lossless":
        if (v.value != form.value.forceLossless) {
          v.value = form.value.forceLossless;
          updateGuaProperty(v);
        }
        break;
      case "disable-audio":
        if (v.value != form.value.disableAudio) {
          v.value = form.value.disableAudio;
          updateGuaProperty(v);
        }
        break;
      case "enable-audio-input":
        if (v.value != form.value.enableAudioInput) {
          v.value = form.value.enableAudioInput;
          updateGuaProperty(v);
        }
        break;
      case "recording-path":
        if (v.value != form.value.recordingPath) {
          v.value = form.value.recordingPath;
          updateGuaProperty(v);
        }
        break;
      case "create-recording-path":
        if (v.value != form.value.createRecordingPath) {
          v.value = form.value.createRecordingPath;
          updateGuaProperty(v);
        }
        break;
      case "enable-touch":
        if (v.value != form.value.enableTouch) {
          v.value = form.value.enableTouch;
          updateGuaProperty(v);
        }
        break;
    }
  });
  // loadProperties();
};

// 加载数据库中的配置数据
const loadProperties = () => {
  findGuaProperties().then(res => {
    res.forEach(item => {
      oldGuaProperty.set(item.key, item);
      switch (item.key) {
        case "domain":
          form.value.domain = item.value;
          break;
        case "security":
          form.value.security = item.value;
          break;
        case "ignore-cert":
          form.value.ignoreCert = item.value;
          break;
        case "resize-method":
          form.value.resizeMethod = item.value;
          break;
        case "force-lossless":
          form.value.forceLossless = item.value;
          break;
        case "disable-audio":
          form.value.disableAudio = item.value;
          break;
        case "enable-audio-input":
          form.value.enableAudioInput = item.value;
          break;
        case "recording-path":
          form.value.recordingPath = item.value;
          break;
        case "create-recording-path":
          form.value.createRecordingPath = item.value;
          break;
        case "enable-touch":
          form.value.enableTouch = item.value;
          break;
      }
    });
  });
};

onMounted(() => {
  loadProperties();
});
</script>

<template>
  <div>
    <el-card>
      <el-alert
        title="全局云安全配置,优先级最低，只在其他配置都没命中的情况下生效。非管理员禁止操作该页面"
        type="warning"
        show-icon
        :closable="false"
        style="margin-bottom: 10px"
      />
      <el-row>
        <el-col :span="12">
          <el-form label-width="100px" status-icon :model="form">
            <el-form-item label="域">
              <div>
                <el-input v-model="form.domain" style="width: 80%" />
                <el-tooltip
                  content="应用主机中存在域控时使用该参数，小规模部署用不到！"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="连接安全模式">
              <div>
                <el-input v-model="form.security" style="width: 80%" />
                <el-tooltip
                  content="rdp连接时使用的网络认证模式，默认any"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="忽略证书">
              <div>
                <el-input v-model="form.ignoreCert" style="width: 80%" />
                <el-tooltip content="Top center" placement="top">
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="画面调整">
              <div>
                <el-input v-model="form.resizeMethod" style="width: 80%" />
                <el-tooltip
                  content="客户端画面宽高发生变化时服务端如何处理更新。默认 reconnect-rdp会话会先断开，然后重新以新的宽高连接；display-update-更新显示，需要rdp8.1以上的版本支持"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="无损压缩">
              <div>
                <el-input v-model="form.forceLossless" style="width: 80%" />
                <el-tooltip
                  content="是否应仅使用无损压缩进行图形更新，建议false，性能优先。"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="音频重定向">
              <div>
                <el-input v-model="form.disableAudio" style="width: 80%" />
                <el-tooltip
                  content="是否需要禁用音频重定向，当带宽不足时可以设置为true，画面将不在传递声音"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="麦克风重定向">
              <div>
                <el-input v-model="form.enableAudioInput" style="width: 80%" />
                <el-tooltip
                  content="是否启用用音频输入支持（麦克风），默认为false，设置true时利用 RDP 的标准“ AUDIO_INPUT ”通道"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="多点触控">
              <div>
                <el-input v-model="form.enableTouch" style="width: 80%" />
                <el-tooltip
                  content="多点触控支持，在触控设备上使用时建议开启。默认为true"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="屏幕录像">
              <div>
                <el-input v-model="form.recordingPath" style="width: 80%" />
                <el-tooltip
                  content="为空时关闭屏幕录像功能，若要开启请输入录像文件的服务器存储路径"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item label="创建录像目录">
              <div>
                <el-input
                  v-model="form.createRecordingPath"
                  style="width: 80%"
                />
                <el-tooltip
                  content="当录像目录不存在时自动创建最后一级目录"
                  placement="top"
                >
                  <component
                    :is="useRenderIcon(epInfoFilled)"
                    style="display: inline-block; margin-left: 10px"
                  />
                </el-tooltip>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="clickUpdataBtn">提交</el-button>
              <el-button @click="loadProperties">加载</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" />
      </el-row>
    </el-card>
  </div>
</template>

<style scoped></style>
